<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <div>盒子 1</div>
    <div>盒子 2</div>
    <div>盒子 3</div>

    <script>
        //  1.查找元素1个，给的是选择器(字符串)
        // document.querySelector 内置的对象，的方法
        const divDom = document.querySelector('div')
        console.log(divDom)
            // 打印 dom 对象，建议用console.dir
        console.dir(divDom)
        setTimeout(() => {
            // 2. 修改元素
            // 改完之后页面会更新
            divDom.innerHTML = '教练,我想打🏀'
        }, 3000)

        // 2.查找多个元素
        // divArr 有 length 属性，有 forEach
        // 但是没有 push，filter 等数组的其他方法
        // 所以他叫做【伪数组】，有 length 属性，通过下标取值
        const divArr = document.querySelectorAll('div')
        console.log(divArr)
        setTimeout(() => {
            // divArr[2].innerHTML = '🐔叫~~'
            divArr.forEach(v => {
                v.innerHTML = '🐔叫~~'
            })
        }, 4000)
    </script>
</body>

</html>